<template>
  <div class="text-center" style="padding-top: 40vh">
    <el-button
      type="primary"
      class="btn-long"
      icon="el-icon-download"
      :loading="loading"
      @click="exportDocx"
    >
      导出Word文档
    </el-button>
    <div class="text-center text-muted">
      通过模板导出word，支持循环列表，表格，条件渲染，简单js表达示等
    </div>
  </div>
</template>

<script>
import { docxTemplateExport } from '@vimi/utils-tool'

export default {
  components: {},
  props: {},
  data() {
    return {
      loading: false,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    exportDocx() {
      const fileName = '委托担保合同'
      const templaterUrl = '/static/files/测试导出模板.docx'
      const tags = {
        contract: {
          no: '黔农担委保字[2020]第002号',
          title: '',
        },
        // contractNo: '黔农担委保字[2020]第002号',
        // title: '委托担保合同',
        aName: '小程序添加001',
        aAddress: '贵州省铜仁市江口县太平镇岑忙村',
        bName: '贵州省农业信贷担保股份有限公司',
        bAddress: '贵州省',
        corpName: '常晓强',
        bankName: '江口长征村镇银行',
        loanNo: 'abcde',

        // 循环
        people: [
          {
            index: 1,
            peopleName: '张三',
            peopleAddress: '张家村',
            peopleIdcard: '520621201304225303',
          },
          {
            index: 2,
            peopleName: '李四',
            peopleAddress: '李家村',
            peopleIdcard: '520621197208077815',
          },
          {
            index: 3,
            peopleName: '王五',
            peopleAddress: '王家村',
            peopleIdcard: '520621198112096987',
          },
        ],
        products: ['产品A', '产品B', '产品C'],

        // 条件
        user1: [{ name: '陈玉1号' }, { name: '陈玉2号' }],
        user2: [],
        user3: [{ name: '陈玉3号' }],

        // 换行
        lines: '1、行一\n2、行二\n3、行三',
      }

      this.loading = true
      docxTemplateExport({
        templaterUrl,
        tags,
        fileName,
      })
        .then(() => {
          this.$message.success('导出成功')
        })
        .catch(err => {
          console.error(err)
          this.$message.error('导出失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
